<!-- 详情页 -->
<template>
  <div class="detail-main">
    <!-- 步骤条 -->
    <div class="step">
      <el-steps :active="step">
        <el-step title="未付款" :description="orderBaseList.addTime"></el-step>
        <el-step title="已付款" :description="orderBaseList.payTime"></el-step>
        <el-step title="已发货" :description="orderBaseList.sendTime"></el-step>
        <el-step title="已收货" :description="orderBaseList.receiveTime"></el-step>
        <el-step title="已关闭" :description="orderBaseList.doneTime"></el-step>
      </el-steps>
    </div>

    <el-card class="detailBox">
      <div slot="header">
        <span>当前订单状态:</span>
        <span v-if="step<4" style="color:#409EFF"> 订单处理中...</span>
        <span v-else style="color:#7FC23A"> 订单已完成</span>
      </div>

      <!-- 基本信息 -->
      <div class="baseInfo">
        <div class="basetop">基本信息:</div>
      </div>
      <div class="basecontent">
        <el-row>
          <el-col :span="6">
            <div class="basetitle">订单编号:</div>
            <div class="basecontentInfo">{{orderBaseInfo.orderId}}</div>
          </el-col>
          <el-col :span="6">
            <div class="basetitle">用户账号:</div>
            <div class="basecontentInfo">{{orderBaseInfo.username}}</div>
          </el-col>
          <el-col :span="6">
            <div class="basetitle">订单金额:</div>
            <div class="basecontentInfo">¥{{orderBaseInfo.price/100}}</div>
          </el-col>
          <el-col :span="6">
            <div class="basetitle">订单数量:</div>
            <div class="basecontentInfo">{{orderBaseInfo.count}}</div>
          </el-col>
          <el-col :span="6">
            <div class="basetitle">订单状态:</div>
            <div class="basecontentInfo">{{orderBaseInfo.orderStatus}}</div>                 
          </el-col>
          <el-col :span="6">
            <div class="basetitle">下单时间:</div>
            <div class="basecontentInfo">{{orderBaseInfo.addTime}}</div>
          </el-col>
          <el-col :span="6">
            <div class="basetitle">付款时间:</div>
            <div class="basecontentInfo">{{orderBaseInfo.payTime}}</div>
          </el-col>
          <el-col :span="6">
            <div class="basetitle">发货时间:</div>
            <div class="basecontentInfo">{{orderBaseInfo.sendTime}}</div>
          </el-col>
          <el-col :span="6">
            <div class="basetitle">付款方式:</div>
            <div class="basecontentInfo">{{orderBaseInfo.payType}}</div>
          </el-col>
          <el-col :span="6">
            <div class="basetitle">收货时间:</div>
            <div class="basecontentInfo">{{orderBaseInfo.receiveTime}}</div>
          </el-col>
          <el-col :span="6">
            <div class="basetitle">退单时间:</div>
            <div class="basecontentInfo">{{orderBaseInfo.backTime}}</div>
          </el-col>
          <el-col :span="6">
            <div class="basetitle">结束时间:</div>
            <div class="basecontentInfo">{{orderBaseInfo.doneTime}}</div>
          </el-col>
        </el-row>
      </div>

      <!-- 收货人信息 -->
      <div class="baseInfo">
        <div class="basetop">收货人信息:</div>
      </div>
      <div class="basecontent">
        <el-row>
          <el-col :span="6" >
            <div class="basetitle">收货人</div>
            <div class="basecontentInfo">{{orderUser.name}}</div>
          </el-col>
           <el-col :span="6" >
            <div class="basetitle">联系方式</div>
            <div class="basecontentInfo">{{orderUser.tel}}</div>
          </el-col>
          <el-col :span="6" >
            <div class="basetitle">邮政编码</div>
            <div class="basecontentInfo">52400</div>
          </el-col>
          <el-col :span="6" >
            <div class="basetitle">地市</div>
            <div class="basecontentInfo">{{orderUser.cityStr}}</div>
          </el-col>
          <el-col :span="6" >
            <div class="basetitle">详细地址</div>
            <div class="basecontentInfo">{{orderUser.tag}}</div>
          </el-col>
        </el-row>
      </div>

      <!-- 商品信息 -->
      <el-table :data="orderDetail" border style="width: 100%; margin:30px 0 10px">
        <el-table-column align="center" label="商品图片" width="180">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px" :src="scope.row.cover_img"></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" label="商品名称" width="180">
          <template slot-scope="scope">
            <div>{{scope.row.gname}}</div>
            <div>
              品牌:
              <span>{{scope.row.brandName}}</span>
              <span>|{{scope.row.brandEname}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="价格货号" width="180">
          <template slot-scope="scope">
            <div>单价:¥{{scope.row.price/100}}</div>
            <div>货号:{{scope.row.sku_code}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="color_text" label="型号" width="180"></el-table-column>
        <el-table-column align="center" label="是否退货" width="180">
          <template slot-scope="scope">
            <div v-if="!scope.row.backId">否</div>
            <div v-if="scope.row.backId" style="color:red">是</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="count" label="数量" width="180"></el-table-column>
        <el-table-column align="center" label="小计" width="180">
          <template slot-scope="scope">
            <div>¥{{scope.row.count*(scope.row.price/100)}}</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="sum" style="font-size:20px; float:right;">
        合计:
        <span style="color:red">¥{{totalPrice}}</span>
      </div>

      <!-- 费用信息 -->
      <div class="baseInfo">
        <div class="basetop">费用信息:</div>
      </div>
      <div class="basecontent">
        <el-row>
          <el-col :span="6">
            <div class="basetitle">费用合计</div>
            <div class="basecontentInfo">{{costInfo.totalPrice}}</div>
          </el-col>
           <el-col :span="6">
            <div class="basetitle">运费</div>
            <div class="basecontentInfo">0</div>
          </el-col>
           <el-col :span="6">
            <div class="basetitle">订单金额</div>
            <div class="basecontentInfo">{{costInfo.totalPrice}}</div>
          </el-col>
           <el-col :span="6">
            <div class="basetitle">实付款</div>
            <div class="basecontentInfo">{{costInfo.totalPrice}}</div>
          </el-col>
        </el-row>
      </div>

      <div class="btn" style="text-align:center">
          <el-button size="small" v-if="step==2" type="primary" @click="shipments">已发货</el-button>
          <el-button size="small" v-if="step==3" type="primary" disabled>等待顾客收货</el-button>
          <el-button size="small" v-if="step==4&&orderBaseList.statusend=='0'" type="primary" @click="orderClose">关闭订单</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import orderApi from "@/api/order/index";
export default {
  name: "orderDetail",
  data() {
    return {
      orderId: "",
      orderDetail: [], //商品信息
      orderBaseList: {}, //基本信息
      orderUserInfo: {
        name:''
      }, //用户信息
    };
  },
  created() {
    this.orderId = this.$route.params.id;
    this.getOrderDetail();
    this.getOrderBase();
    this.getOrderUserInfo();
  },
  computed: {
    // 基本信息
    orderBaseInfo() {
      const orderStatusObj = {
        "0": "未付款",
        "1": "已付款",
        "2": "已发货",
        "3": "已收货",
        "9": "申请退款",
      };
      return {
        orderId: this.orderBaseList.orderId,
        username: this.orderBaseList.username,
        price: this.orderBaseList.price,
        count: this.orderBaseList.count,
        orderStatus: orderStatusObj[this.orderBaseList.orderStatus],
        addTime: this.orderBaseList.addTime,
        payTime: this.orderBaseList.payTime,
        payType: this.orderBaseList.payType,
        sendTime: this.orderBaseList.sendTime,
        receiveTime: this.orderBaseList.receiveTime,
        backTime: this.orderBaseList.backTime,
        doneTime: this.orderBaseList.doneTime,
      };
    },

    //收货人信息
    orderUser() {
      return {
        name: this.orderUserInfo.name,
        tel: this.orderUserInfo.tel,
        cityStr: this.orderUserInfo.cityStr,
        tag: this.orderUserInfo.tag,
      };
    },

    //商品总价
    totalPrice() {
      var totalPrice = this.orderDetail.reduce((a, b) => {
        a += (b.price * b.count) / 100;
        return a;
      }, 0);
      return totalPrice;
    },

    //费用信息
    costInfo(){
        const totalPrice=this.totalPrice
        return{
            totalPrice:'¥'+totalPrice,
            totalPrice:'¥'+totalPrice,
            totalPrice:'¥'+totalPrice,
        }
    },

    step(){

        return parseInt(this.orderBaseList.orderStatus)+1
    }
  },
  methods: {
    //订单基本信息
    getOrderBase() {
      orderApi
        .orderList({
          orderId: this.orderId,
        })
        .then((res) => {
          this.orderBaseList = res.data.list[0];
        });
    },

    //用户信息
    getOrderUserInfo() {
      orderApi
        .orderUserInfo({
          orderId: this.orderId,
        })
        .then((res) => {
          this.orderUserInfo = res.data;
        });
    },

    // 订单详情
    getOrderDetail() {
      orderApi
        .orderDetail({
          orderId: this.orderId,
        })
        .then((res) => {
          this.orderDetail = res.data;
        });
    },
     
    //发货 
    shipments(){
        orderApi.sendDone({
            id:this.orderBaseList.orderId
        }).then(res=>{
          if(res.code=='s'){
              window.location.reload()
          }else{
              this.$message.error(res.msg)
          }
        })
    },

    //关闭订单
    orderClose(){
        orderApi.closeOrder({
            id:this.orderBaseList.orderId,
        }).then(res=>{
            if(res.code=='s'){
                window.location.reload()
            }else{
                this.$message.error(res.msg)
            }
        })
    }
  },
};
</script>

<style lang='scss' scoped>
.detail-main {
  .step {
    width: 80%;
    margin-left: 10%;
    margin-top: 30px;
  }
  .detailBox {
    margin: 30px;
    .basetop {
      margin-top: 30px;
    }
    .basecontent {
      margin: 20px 0;
      .basetitle {
        height: 30px;
        line-height: 30px;
        border: 1px solid #EBEEF5;
        text-align: center;
        background-color: #F5F7FA;
      }
      .basecontentInfo {
        height: 50px;
        line-height: 50px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border: 1px solid #EBEEF5;

      }
    }
  }
}
</style>